<template>
  <div class="portal-list">
    <div class="protlet-title">请选择布局</div>
    <div class="portal-list-body">
      <!--布局模板, 缩放 300*200-->
      <div v-for="(item, index) in portalZoomList" :key="index" class="suofangblock" @click="clickPortletSelect(item)">
        <component :is="item.com"></component>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, defineEmits, ref, toRefs, defineProps, defineAsyncComponent } from 'vue'

import factory from '../../factory'
import regCom from '@/utils/registerComFun'

import { storeToRefs } from 'pinia'
import { useStoreMenu } from '@/pinia/menuList'
const StoreLayout = useStoreMenu()
//引入pinia 保存的所有 小组件/
import { useStoreAllLayout } from '@/pinia/allLayoutList'
const StoreAllLayout = useStoreAllLayout()
// const {allLayoutList: portalZoomList} = storeToRefs(StoreAllLayout)

const portalZoomList = ref([])
//==清空 布局 与 小组件==============
StoreLayout.clearLayAndPor()

//==获取所有可选的布局组件=========
let post = { pageNo: 1, pageSize: 10 }
factory.searchLayoutList(post).then((res) => {
  res.data.dataList.forEach((item, index) => {
    item.com = regCom(item.html)
    portalZoomList.value.push(item)
  })
  setTimeout(() => {
    suofang()
  }, 0)
})

function suofang() {
  let block = document.getElementsByClassName('suofangblock')
  Array.prototype.forEach.call(block, function (el) {
    // 宽度缩放比例:wr = el.offsetWidth/300, 高度缩放比例:hr = el.offsetHeight/200 , 取最大比例缩放
    let wr = el.children[0].offsetWidth / 300
    let hr = el.children[0].offsetHeight / 200
    let r = wr
    let sw = el.children[0].offsetWidth / r
    let sh = el.children[0].offsetHeight / r
    el.children[0].style.transform = `scale(${1 / r},${1 / r})`
    el.children[0].style['transform-origin'] = '0% 0%'
  })
}

//==选择布局时,应用
const emit = defineEmits(['layoutSelected'])
const clickPortletSelect = (item) => {
  StoreLayout.addLayout(item)
  emit('layoutSelected', '')
}
</script>

<style scoped lang="less">
.portal-list {
  width: 80%;
  height: 80%;
  position: fixed;
  top: 62px;
  left: 10%;
  border: 1px solid #8c8c8c;
  user-select: none;
  background-color: white;
  box-sizing: content-box;

  .protlet-title {
    height: 40px;
  }

  .portal-list-body {
    max-height: calc(100% - 40px);
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;

    .suofangblock {
      width: 300px;
      height: 200px;
      position: relative;
      border: 1px solid black;
      overflow: hidden;
      margin: 10px;
    }
  }
}
</style>
